<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Suporka Vue App</title>
  <style>
    #suporka-dot .suporka-dot--acitve {
        background: red!important;
      }
    </style>
</head>

<body>
  <div id="carousal">
    <button type="button" class="suporka-carousel__arrow suporka-carousel__arrow--left" style="" id="suporka-prev-btn">&lt;</button>
    <div id="wrapper">
      <div class="box">
        <img src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" alt="">
      </div>
      <div class="box">
        <img src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher2.jpg" alt="">
      </div>
      <div class="box">
        <img src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher3.jpg" alt="">
      </div>
      <div class="box">
        <img src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher4.jpg" alt="">
      </div>
    </div>
    <button type="button" class="suporka-carousel__arrow suporka-carousel__arrow--right" style="" id="suporka-next-btn">&gt;</button>
    <div id="suporka-dot">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <!-- <script type="text/javascript" src="carousal-dev.js"></script> -->
  <!-- <script type="text/javascript" src="carousal.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/suporka-carousal@1.0.1/carousal.js"></script>
  <script>
    new Carousal()
  </script>
</body>

</html>